import React, { Component } from 'react'
import { Tooltip, Form, Input, Button, Pagination, message } from 'antd'
import ReactPlayer from 'react-player'
import './videos.less'
import TopNav from '../top_nav'
import BottomBar from '../bottom_bar'
import Video from '../../assests/videos/video.mp4'
import { getMemberInfo } from '../../utils/auth'
import parseUrl from '../../utils/parseUrl'
import memberCommontApi from '../../api/memberCommont'
import courseApi from '../../api/course'

class Videos extends Component {
  state = {
    videoId: "",
    videoUrl: "",
    pageNum: 1,
    pageSize: 10,
    total: 0,
    commontList: [],
    chapters: [],
    title: ''
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getCourseInfo()
    this.getCommontList(parseUrl(this.props.location.search).id, this.state.pageNum, this.state.pageSize)
  }
  getCourseInfo = () => {
    courseApi.getDetails(parseUrl(this.props.location.search).id).then(res => {
      if (res.success) {

        this.setState({
          title: res.data.course.title,
          chapters: res.data.course.chapters
        })
        this.state.chapters.forEach(item => {
          if (item.id == parseUrl(this.props.location.search).videoId) {
            this.setState({
              videoId: item.id,
              videoUrl: item.url
            })
          }
        })
      }
    })
  }
  chooseVideo = (item) => {
    return () => {
      this.setState({
        videoId: item.id,
        videoUrl: item.url
      })
    }
  }

  getCommontList = (courseId, pageNum, pageSize) => {
    memberCommontApi.list({ courseId, pageNum, pageSize }).then(res => {
      if (res.success) {
        this.setState({
          commontList: res.data.records,
          total: res.data.total
        })
      }
    }).catch(err => {

    })
  }

  commentRef = React.createRef()
  handleComment = (data) => {
    const courseId = parseUrl(this.props.location.search).id
    const memberId = getMemberInfo().id
    const jsonData = { courseId, memberId, ...data }
    if (memberId && courseId) {
      memberCommontApi.add(jsonData).then(res => {
        if (res.success) message.success("发布评论成功")
        this.commentRef.current.setFieldsValue({
          content: ''
        })
        this.getCommontList(courseId, this.state.pageNum, this.state.pageSize)
      }).catch(err => {
        console.log(err);
      })
    } else {
      message.warning("请先登录")
    }
  }
  // 修改页码
  onPageChange = (current, pageSize) => {
    this.getCommontList(parseUrl(this.props.location.search).id, current, pageSize)
  }
  render() {
    const { videoId, videoUrl, commontList, pageNum, total, chapters, title } = this.state
    return (
      <div className="videos-container">
        <TopNav style={{ background: '#fff' }} active="/course" />
        <div className="video-box">
          {/* <ReactPlayer
            className='react-player'
            url={videoUrl.indexOf("http") > 0 ? videoUrl : Video}
            width='100%'
            height='540px'
            controls
            v='yszddd5S6PUM-U'
          /> */}
          <iframe src={videoUrl}
            scrolling="no"
            border="0"
            frameBorder="no"
            framespacing="0"
            allowFullScreen={true}
            sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
            width="100%"
            height="600"
          ></iframe>
          <div className="video-items">
            <h2>{title}</h2>
            <ul>
              {
                chapters ? chapters.map(item => {
                  return (
                    <li className={item.id === videoId ? 'active' : ''} key={item.id} onClick={this.chooseVideo(item)}>
                      <Tooltip placement="topLeft" arrowPointAtCenter title={item.name}>
                        {item.name}
                      </Tooltip>
                    </li>
                  )
                }) : '暂无课程视频'
              }

            </ul>
          </div>
          <div className="blog-commont">
            <Form ref={this.commentRef} onFinish={this.handleComment}>
              <Form.Item
                name="content"
                rules={[{ required: true, message: '评论内容不能为空' }]}
              >
                <Input.TextArea rows={4} />
              </Form.Item>
              <Form.Item >
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <Button htmlType="submit" type="primary">
                    发表评论
                  </Button>
                </div>
              </Form.Item>
            </Form>
            <h2>全部评论</h2>
            <ul className="commont-list">
              {
                commontList.map(item => {
                  return <li className="commont-item" key={item.id}>
                    <div className="avatar">
                      <img src={item.memberAvatar} alt="avatar" />
                    </div>
                    <div className="commont-text">
                      <div>
                        <span className="member-name">{item.memberName}</span>
                        <span className="create-time">{item.gmtCreate}</span>
                      </div>
                      <div>{item.content}</div>
                    </div>
                  </li>
                })
              }
            </ul>
            <div style={{ textAlign: 'center', margin: '10px 0' }}>
              <Pagination
                onChange={this.onPageChange}
                defaultCurrent={pageNum}
                total={total}
              />
            </div>

          </div>
        </div>
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
      </div>
    )
  }
}
export default Videos
